<template>
	<detailbox title="查看"  @leftclick="close">
		<div slot="right" class="flex_item flex_between">
			<div class="warn_f gosign f12" v-if="detail.processStatus == 0 && detail.createUser == userInfo.user_id">请前往APP端，进行签名操作</div>
			<div v-else-if="detail.processStatus == 6 || detail.processStatus == 4" class="error error_f f12 ml10 p5">
			  <i class="f14 el-icon-error"></i>
			 审核未通过: <span class="ml30">{{ checkItem.type==1?'审核人:':checkItem.type==3?'记录责任人:':checkItem.type==4?'批准人:':'' }}  {{checkItem.createUserName}}</span> <span class="ml30">未通过原因: {{checkItem.content}}</span>  
			</div>
			<div v-else></div>
			<div class="">
				<el-button type="primary" size="small" plain @click="openDialg('print')">打印</el-button>
				<el-button type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情</el-button>
			</div>
		</div>
		<el-row class="mt10">
			<el-col :span="12">
				<basic-container>
					<div class="main_title success_f">
						<b>管理信息</b>
					</div>
					<el-divider></el-divider>
					<div class="mb20">
						<span class="index_num success_bg">1</span>
						<b class="f14">基础信息</b>
					</div>
					<procss-work :item="detail"></procss-work>
					<work-file :detail="detail"></work-file>
				</basic-container>
			</el-col>
			<el-col :span="12">
				<process-record :guifanFilesProcessRecordList="guifanFilesProcessRecordList" :shenheNum="shenheNum"></process-record>
			</el-col>
		</el-row>
		<steps ref="steps"></steps>
		<showhistory ref="showhistory" type="1" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory>
		<showgongxu ref="showgongxu" type="1"></showgongxu>
		<work-print ref="print" :detail="detail"></work-print>
	</detailbox>
</template>

<script>
	import showgongxu from "./showgongxu.vue"
    import procssWork from './procss-work.vue';
  import { getguifanDetail } from '@/api/myapi/tixiwenjian';
	export default {
    props: {
      detailId: ''
    },
		components: {
			showgongxu,
      procssWork
		},
		data() {
			return {
				radio: '',
				checked: false,
				showpreview: false,
				tableData: [],
				useTemp: false,
				form: {},
				options: [],
        guifanFilesProcessRecordList: [],
        detail: {},
        shenheNum: 0,
        system: 'productionmanageprocess',
			}
		},
    created() {
      this.getDetail();
    },
		methods: {
			close() {
				this.$emit('close')
			},
      getDetail() {
        getguifanDetail(
          {
            id: this.detailId
          },
          this.system
        ).then(({ data }) => {
          if (data.success) {
            this.detail = data.data;
            this.shenheNum = data.data.processRecordList.length;
            this.guifanFilesProcessRecordList = data.data.processRecordList;
          }
        });
      }
		}
	}
</script>

<style lang="scss">
	.active {
		background-color: #E6F1FC !important;
		color: #126BC9;
	}

	.gosign {
		line-height: 30px;
		background: #FBF4E0;
		border: 1px solid #F3DEA4;
		opacity: 1;
		border-radius: 2px;
		padding: 0 10px;
		margin-left: 30px;
	}
</style>
